/**
 * 表格
 * */
layui.define(['table', 'sdDialog', 'laytpl', 'sysViews', 'form', 'sdLocal', 'globalConfig', 'sysApplication'], (exports) => {
	let table = layui.table;
	let laytpl = layui.laytpl;
	let sysViews = layui.sysViews;
	let form = layui.form;
	let sdLocal = layui.sdLocal;
	let globalConfig = layui.globalConfig;
	let sysApplication = layui.sysApplication;
	let sdDialog = layui.sdDialog;
	
	let sdTable = {
		render(configuration, merge) {
			// 搜索栏
			configuration.search ? sdTable.search(configuration.search) : "";

			let tem = configuration;
			// 分页控制
			let page = ((typeof configuration.page) == "undefined") ? true : false;
			let base = {};
			if (page) {
				base = {
					limits: [6, 12, 24, 36, 48],
					limit: configuration.limit || 12,
					page: true
				}
			} else {
				base = {
					limit: 1024
				}
			}
			// 工具栏右侧的图标 可配置:'filter', 'print', 'exports'
			if (tem.defaultToolbar) {
				base.defaultToolbar = ['filter', 'print', 'exports'];
			}
			let info = configuration.info,
				tool = configuration.tool,
				bar = configuration.bar,
				radio = configuration.radio,
				click = configuration.click,
				toolbar = configuration.toolbar;
			let table_id = tem.id;
			let body = $('.layui-body').height();
			let tab = $('.layui-tab-title').height();
			let search = 0;

			// let footer = $('.layui-footer').css('display');
			try {
				if ((typeof configuration.search.filter) != "undefined") {
					let id = '#' + configuration.search.filter;
					search = $(id).height();
				}
			} catch (e) {

			}

			let height = (body - tab - search - 50) + "px";

			let defaults = {
				headers: {
					token: sdLocal.token.get()
				},
				elem: '#' + tem.id,
				url: globalConfig.action + tem.url,
				cols: [tem.cols],
				height: tem.height || height,
				toolbar: tem.toolbar ? [] : sysApplication.btns.top(),
				where: (typeof tem.where) == "undefined" ? {} : tem.where,
				done: (typeof tem.done) == "undefined" ? function() {
					if(merge){
						merge.render(this)
					}
				} : tem.done
			}
			delete tem.id;
			delete tem.url;
			delete tem.cols;
			delete tem.where;

			$.extend(defaults, tem, base);
			let tableConponent = table.render(defaults);
			
			// 双击详情
			if (info) {
				let rowDouble = 'rowDouble(' + table_id + ')';
				table.on(rowDouble, function(obj) {
					let data = obj.data;
					if (info.url) {
						sdDialog.popupCenter({
							title: info.title || "数据详情",
							height: (typeof info.height) == "undefined" ? '80%' : info.height,
							width: (typeof info.width) == "undefined" ? '660px' : info.width,
							path: info.url,
							btn: [],
							init() {
								info.init ? info.init(data.id) : "";
							}
						});
					} else {
						if (info.image) {
							info.image(data);
						} else {
							sdDialog.info({
								height: (typeof info.height) == "undefined" ? '80%' : info.height,
								width: (typeof info.width) == "undefined" ? '660px' : info.width,
								init() {
									let getTpl = tplInfo.innerHTML;
									let view = document.getElementById('common-info-view');
									laytpl(getTpl).render(info.data, function(html) {
										view.innerHTML = html;
										$.each(info.data, function(k1, v1) {
											$.each(data, function(k2, v2) {
												if (v1.field == k2) {
													let id = '#info-view-' + k2;
													if (typeof v1.templet == 'function') {
														$(id).html(v1.templet(v2));
													} else {
														$(id).html(v2);
													}
												}
											})
										});
									});

									//标注选中样式
									obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
								}
							});
						}
					}
				});
			}
			// 表格右侧按钮
			if (tool) {
				let rowToolbar = 'tool(' + table_id + ')';
				table.on(rowToolbar, tool);
			}
			// 表格顶部按钮
			if (bar) {
				let rowToolbar = 'toolbar(' + table_id + ')';
				table.on(rowToolbar, bar);
			}
			// 表格单选监听
			if (radio) {
				let rowRadio = 'radio(' + table_id + ')';
				table.on(rowRadio, radio);
			}
			// 单选获取选中行事件
			if (click) {
				let rowClick = 'row(' + table_id + ')';
				table.on(rowClick, click);
			}
			return tableConponent;
		},
		search(search) {
			let btn = "&nbsp;&nbsp;<div style='padding-top:3px;' class=\"layui-inline\">\n" +
				"           <button class=\"layui-btn icon-btn\" lay-filter=\"" + search.filter + "\" lay-submit>\n" +
				"               <i class=\"layui-icon\">&#xe615;</i>搜索\n" +
				"           </button>\n" +
				"           <button class=\"layui-btn icon-btn layui-bg-red\" lay-filter=\"search-refresh\" lay-submit>\n" +
				"               <i class=\"layui-icon\">&#xe9aa;</i>重置\n" +
				"           </button>\n" +
				"      </div>";
			let html = "";

			// 生成input的html
			$.each(search.components, function(i, o) {
				html += searchComponents(o);
			})
			html = $.trim(html);
			if (html.length > 0) {
				html += btn;
			}
			let id = (search.filter).indexOf("#") >= 0 ? search.filter : "#" + search.filter;
			$(id).html(html);

			// 处理input类型
			$.each(search.components, function(i, o) {
				if (o.code == 2) {
					let id = '#' + o.name;
					let format = o.format ? o.format : "yyyy-MM-dd";
					laydate.render({
						elem: id,
						format: format,
						theme: 'grid',
						calendar: true,
						range: o.range || false
					});
				}
			})
			form.render();

			search.init ? search.init() : "";
			let filter = 'submit(' + search.filter + ')';
			form.on(filter, function(data) {
				search.submit ? search.submit(data.field) : "";
			})
			form.on('submit(search-refresh)', function(data) {
				sysViews.refresh();
			})

		},
		check(id) {
			return table.checkStatus(id);
		},
		reload(id, where, curr) {
			let options = {};
			where ? (options.where = where) : "";
			curr ? (options.page = {
				curr: curr
			}) : "";
			table.reload(id, options);
		},
		init(id) {
			table.init(id, {
				height: 'full-500'
			});
		},
		initTree(configuration) {
			let tbId = (configuration.id).indexOf('#') >= 0 ? configuration.id : '#' + configuration.id;
			let tb = treeTable.render({
				elem: tbId,
				data: configuration.data,
				icon_key: 'title',
				end: function(e) {
					form.render();
				},
				cols: configuration.cols
			});
			// 监听时间
			$.each(configuration.btns, (i, o) => {
				let tbtn = 'tree(' + o.opt + ')';
				treeTable.on(tbtn, function(data) {
					o.event ? o.event(data.item) : ""
				})
			})
			return tb;
		},
		refreshTree(tb) {
			treeTable.render(tb);
		}

	}

	function searchComponents(component) {
		let html = "";
		// 一般录入框
		if (component.code == 1) {
			let placeholder = (typeof component.placeholder) == "undefined" ? "请输入查询条件" : component.placeholder;
			html = "<div class=\"layui-inline\" style='margin-top: 3px;'>" +
				"        <label class=\"layui-form-label w-auto\">" + component.title + ":</label>" +
				"        <div class=\"layui-input-inline mr0\" style=\"width:200px;\">" +
				"             <input maxlength=\"20\" name=\"" + component.name +
				"\" class=\"layui-input\" type=\"text\" placeholder=\"" + placeholder + "\"/>" +
				"        </div>" +
				"   </div>"
		}
		// 日期选择
		if (component.code == 2) {
			html = "<div class=\"layui-inline\" style='margin-top: 3px;'>" +
				"        <label class=\"layui-form-label w-auto\">" + component.title + ":</label>" +
				"        <div class=\"layui-input-inline mr0\" style=\"width:200px;\">" +
				"             <input type=\"text\" name=\"" + component.name + "\" id=\"" + component.name +
				"\" placeholder=\"请选择\" autocomplete=\"off\" class=\"layui-input\">" +
				"        </div>" +
				"   </div>";
		}
		// 下拉选择
		if (component.code == 3) {
			let options = "option value=\"0\">==请选择==</option>";
			$.each(component.options, function(i, o) {
				options += "<option value=\"" + o.value + "\">" + o.title + "</option>";
			})
			html = "<div class=\"layui-inline\" style='margin-top: 3px;'>" +
				"        <label class=\"layui-form-label w-auto\">" + component.title + ":</label>" +
				"        <div class=\"layui-input-inline mr0\" style=\"width:200px;\">" +
				"             <select name=\"" + component.name + "\"  {{# if(item.search){ }} lay-search=\"\" {{# } }}>" +
				options +
				"             </select>" +
				"        </div>" +
				"   </div>"
		}
		return html;
	}
	exports('sdTable', sdTable);
})
